<template>
  <div class="index">
    
    <!-- 占位组件, 二级路由对应组件的渲染出口 -->
    <router-view />

    <div class="tabbar">
      <!-- router-link 会根据浏览器地址栏的路由地址 动态添加/移除相关的类, 借助这些类可以实现按钮高亮 , 在实际使用时 不能将router-link替换为a标签, 因为点击a标签会导致页面刷新,而且a标签不会维护按钮高亮 -->
      <router-link to="/HelloWorld">首页</router-link>
      <router-link to="/Tuan">爆爆团</router-link>
      <router-link to="/Order">订单</router-link>
      <router-link to="/mine">我的</router-link>
    </div>

  </div>
</template>

<script>

export default {
  name: 'HomeView'
}
</script>

<style scoped>
.tabbar{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  background-color: white;
}
</style>
